import React, {useEffect, useState} from 'react';
import {Checkbox, Form, Input, message, Space, Switch} from "antd";
import {FormInstance} from "antd/es/form";
import {createRole, getRole, getRoleShow, updateRole} from "../../../api/role";


type PropsType = React.PropsWithChildren<{
    afterSubmit?: (values: any, isEdit:boolean, form: FormInstance<any>) => void;
    id:number,

}>;
interface RoleType{
    name:String,
    remark:String,
    details:String,
    key:String,
    id:number,
    enable:boolean|undefined,
}
function RoleForm(props:PropsType,ref:React.ForwardedRef<FormInstance>) {
    const [form] = Form.useForm();
    const [isEdit, setIsEdit] = useState(true);
    const [id, setId] = useState(0);
    useEffect(() => {
        const id = props.id
        setId(id)
        id>0 ? getRowRole(id):""
        id>0 ? setIsEdit(true):setIsEdit(false)
    }, []);

    const getRowRole = (id:number)=>{
        getRoleShow(id).then(res=>{
            if(res.data.code===1){
                form.setFieldsValue(res.data.data)
            }
        })
    }
    // 提交后获取表单数据，请求接口，重置表单并关闭
    const onSubmit = (values: RoleType) => {
        console.log(values);
        //await  fetch ...
        isEdit===true?editRole(values,id):addRole(values)
        //isEdit===true ? update(values):create(values)
        values.id =id
        form.resetFields();
        //props.afterSubmit?.(values, form);
    };
    const addRole = (values:RoleType) => {
        createRole(values).then((res:any)=>{
            if(res.data.code===1){
                message.success(res.data.msg)
                values.id =res.data.data
                props.afterSubmit?.(values,isEdit, form);
            }
        })
    }
    const editRole = (values:RoleType,id:number) => {
        updateRole(values,id).then((res:any)=>{
            if(res.data.code===1){
                message.success(res.data.msg)
                values.id =id
                props.afterSubmit?.(values, isEdit,form);
            }
        })
    }
    return (
        <div className="form">
            <Form
                onFinish={onSubmit}
                initialValues={form}
                ref={ref}
                form={form}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 16 }}
            >
                <Form.Item
                    label="名称"
                    name="name"
                    rules={[{ required: true, message: 'Please input  name!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="备注"
                    name="remark"
                    rules={[{ required: false, message: 'Please input  remark!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="详情"
                    name="details"
                    rules={[{ required: false, message: 'Please input  details!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="是否启用"
                    name="enable"
                    valuePropName="checked"
                    rules={[{ required: false, message: 'Please input  details!' }]}
                >
                     <Switch checkedChildren="开启" unCheckedChildren="关闭"  ></Switch>
                 </Form.Item>

            </Form>

        </div>

    );
}

export default RoleForm;
